<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="filters" :rules="rule" label-position="right" :label-width="90" inline>
                    <FormItem label="小区" prop="housingId">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="组团" prop="groupName">
                        <div class="filters-input">
                            <el-select v-model="filters.groupName" filterable placeholder="请选择组团" clearable
                                       no-data-text="暂无数据" @change="groupNamechange">
                                <el-option v-for="item in groupNameList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="楼栋">
                        <div class="filters-input">
                            <el-select v-model="filters.building" @change="buildingchange" placeholder="请选择楼栋"
                                       filterable clearable no-data-text="暂无数据">
                                <el-option v-for="item in buildList" :value="item.label"
                                           :key="item.label"
                                           :label="item.label"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="单元">
                        <div class="filters-input">
                            <el-select v-model="filters.unit" @change="unitchange" placeholder="请选择单元" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in unitList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="房间" prop="room">
                        <div class="filters-input">
                            <el-select v-model="filters.room" placeholder="请选择房间号" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in roomList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <ButtonGroup>
                            <Button type="primary" icon="ios-search" @click="handleQuery('filters')">搜索</Button>
                        </ButtonGroup>
                    </FormItem>
                </Form>
            </Row>

            <Row>

                <div class="cashier">
                    <el-row :gutter="20">
                        <el-col :span="9">
                            <div class="grid-content">房间：{{billInfo.housingName}} {{billInfo.groupName }}
                                {{billInfo.building}} {{billInfo.unit}}
                                {{billInfo.room}}
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="grid-content">业主：{{billInfo.ownerName}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">面积：{{billInfo.architectureArea}}</div>
                        </el-col>
                    </el-row>
                </div>
                <el-table :data="billInfo.billList" border style="width: 100%"
                          @selection-change="handleSelectionChange" ref="multipleTable">
                    <template slot="empty">暂无数据</template>
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="costTypeName" label="收费项目" width="180"></el-table-column>
                    <el-table-column prop="amount" label="应收金额（元）"></el-table-column>
                    <el-table-column prop="accountPeriod" label="账期"></el-table-column>
                    <el-table-column prop="startDay" label="出账日期"></el-table-column>
                    <el-table-column prop="endDay" label="截止日期"></el-table-column>
                </el-table>

                <div class="ly-footer">
                    <Form :model="wwkFile" ref="wwkFile" :rules="rule" label-position="right" :label-width="90" inline>
                        <FormItem label="总计:" prop="total" class="ly-total">
                            <div class="amount-text">{{wwkFile.total}} 元</div>
                        </FormItem>
                        <FormItem label="支付方式" prop="payType" class="ly-type">
                            <Select v-model="wwkFile.payType" placeholder="请选择付款方式" filterable clearable
                                    style="width: 250px;">
                                <Option value="3">现金</Option>
                                <Option value="4">刷卡</Option>
                                <Option value="5">银行转账</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="" class="ly-btn">
                            <Button type="primary" @click="upWwkFile">确定</Button>
                        </FormItem>
                    </Form>

                </div>


            </Row>


        </Card>
    </div>
</template>

<script>
    //校验规则
    const rules = {
        housingId: [
            {
                required: true,
                message: "请选择小区"
            }
        ],
        building: [
            {
                required: true,
                message: "请选择楼栋"
            }
        ],
        unit: [
            {
                required: true,
                message: "请选择单元"
            }
        ],
        room: [
            {
                required: true,
                message: "请选择房间"
            }
        ],
        total: [
            {
                required: true,
                message: "请先选择收费项目"
            }
        ],
        payType: [
            {
                required: true,
                message: "请先选择支付方式"
            }
        ],

    }
    export default {
        data() {
            return {
                //验证规则
                rule: rules,
                //查询条件
                filters: {
                    room: ''
                },
                //小区列表
                houseList: [],
                //组团
                groupNameList: [],
                // 楼栋
                buildList: [],
                //单元
                unitList: [],
                //房间
                roomList: [],
                filters_room: '',
                payStatus: [],
                //表单提交状态
                multipleSelection: [],
                billInfo: {},
                wwkFile: {
                    ids: [],
                    total: "",
                    payType: ''
                },
                total: '',
                selectMoney: [],
            }
        },
        created: function () {
            this.gethouse();
        },
        methods: {


            //加载小区
            gethouse: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    this.houseList = res;
                    // this.filters.housingId = res[0].id;
                    // this.housechange(this.filters.housingId);
                });
            },
            //小区改变，加载组团
            housechange: function (value) {
                this.groupNameList = [];
                this.buildList = [];
                this.unitList = [];
                this.roomList = [];
                this.filters.groupName = "";
                this.filters.building = "";
                this.filters.unit = "";
                this.filters.room = "";
                this.getRequest("/api/room/queryGroupName?housingId=" + value).then(res => {
                    // console.log(res)
                    if (res.data.groupList != null) {
                        this.groupNameList = res.data.groupList;
                    } else if (res.data.buildList != null) {
                        this.buildList = res.data.buildList;
                    } else if (res.data.unitList != null) {
                        this.unitList = res.data.unitList;
                    } else {
                        this.roomList = res.data.roomList;
                    }
                });
            },
            //选择组团，加载楼栋
            groupNamechange: function (value) {
                this.buildList = [];
                this.unitList = [];
                this.roomList = [];
                this.filters.building = "";
                this.filters.unit = "";
                this.filters.room = "";
                const url = "/api/room/queryBuilding?groupName=" + value + "&housingId=" + this.filters.housingId;
                this.getRequest(url).then(res => {
                    if (res.data.buildList != null) {
                        this.buildList = res.data.buildList;
                    } else if (res.data.unitList != null) {
                        this.unitList = res.data.unitList;
                    } else {
                        this.roomList = res.data.roomList;
                    }
                });
            },
            // 选楼栋，加载单元
            buildingchange: function (value) {
                this.unitList = [];
                this.roomList = [];
                this.filters.unit = "";
                this.filters.room = "";
                let url = "/api/room/queryUnit";
                let params = {
                    building: value,
                    housingId: this.filters.housingId,
                    groupName: this.filters.groupName
                };
                this.postRequest(url, params).then(res => {
                    if (res.data.unitList != null) {
                        this.unitList = res.data.unitList;
                    } else {
                        this.roomList = res.data.roomList;
                    }
                });
            },
            //选择单元加载房间
            unitchange: function (value) {
                this.roomList = [];
                let url =
                    "/api/room/queryRoom?unit=" +
                    value +
                    "&housingId=" +
                    this.filters.housingId +
                    "&groupName=" +
                    this.filters.groupName +
                    "&building=" +
                    this.filters.building;

                this.getRequest(url).then(res => {
                    // console.log(res)
                    this.roomList = res.data.roomList;
                });
            },

            //查询
            handleQuery(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/housing/loadRoomData", this.filters).then(res => {
                            this.billInfo = res.data;
                            const _this = this;
                            setTimeout(function () {
                                _this.toggleSelection()
                            }, 500);
                        });
                    }
                })
            },

            toggleSelection() {
                this.billInfo.billList.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            },

            handleSelectionChange(val) {
                console.log(val);
                if (val.length > 0) {
                    const selectList = [];
                    const money = [];
                    val.forEach(row => {
                        selectList.push(row.id);
                        money.push(row.amount);
                    });
                    this.wwkFile.ids = selectList;
                    this.wwkFile.total = new Number(money.reduce((total, item) => total + item)).toFixed(2);
                } else {
                    this.wwkFile.total = 0.00;
                }
            },
            //确认-一键催收
            upWwkFile() {
                this.$refs['wwkFile'].validate((valid) => {
                    if (valid) {
                        console.log(this.wwkFile);
                        this.postRequest("/api/bill/batchCollection", this.wwkFile).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("收款成功！");
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    };
</script>

<style lang="less" scoped>
    .cashier {
        width: 100%;
        height: auto;
        background: #f0faff;
        border: 1px solid #abdcff;
        border-radius: 4px;
        padding: 6px;
        margin-bottom: 10px;
    }

    .grid-content {
        height: 30px;
        padding-left: 10px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ly-footer {
        width: 100%;
        height: 50px;
        background: #f5f7fa;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
    }

    .ly-total {
        width: 240px;
        margin-top: 10px;
    }

    .ly-type {
        width: 350px;
        margin-top: 8px;
    }

    .ly-btn {
        width: 150px;
        margin-top: 8px;
    }

    .amount-text {
        color: red;
        font-size: medium;
    }
</style>
